<template>
  <div>
    <el-collapse>
      <el-collapse-item title="DynamicTree" name="1">
        <DynamicTree
          treeType="FLOW_ADMIN_PERMISSION"
          :canEdite="true"
          :canSearch="true"
          :canMultipleCheck="true"
        />
      </el-collapse-item>
      <el-collapse-item title="AmisRenderer" name="2">
        <AmisRenderer
          :amisType="amisType"
          :amisData="dataHolder.amisData"
          v-model:value="dataHolder.amisValue"
        />
      </el-collapse-item>
      <el-collapse-item title="JSTEST" name="3">
        <el-input v-model="testJS" :rows="2" type="textarea" placeholder="Please input" />
        <el-button type="info" @click="runTestJS">运行</el-button>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script setup lang="ts">
import { onMounted, PropType, ref, watch, reactive, computed } from 'vue'
import { DynamicTree } from '@/components/DynamicTree'
import { AmisRenderer } from '@/components/AMisRenderer'
import { ElCollapse, ElCollapseItem } from 'element-plus'
import request from '@/config/axios'

const props = defineProps({
  helpMessage: {
    type: [String, Array] as PropType<string | string[]>,
    default: ''
  }
})
const emit = defineEmits(['update:helpMessage'])
const amisType = ref('AmisTest')
const dataHolder: any = reactive({ mapValue: '', amisData: {}, amisValue: '{"text":"wysi"}' })
const testJS = ref('')
const c = computed(() => {
  emit('update:helpMessage', props.helpMessage)
  return 1
})

function runTestJS() {
  request.postFormFull({ url: '/demo/testJS', data: { js: testJS.value } }).then((data) => {
    console.log(data)
  })
}

watch(
  () => dataHolder.amisData,
  (newVal, oldVal) => {
    console.log('data.amisData is changed', newVal, oldVal)
  }
)
watch(
  () => dataHolder.amisValue,
  (newVal) => {
    console.log('data.amisValue is changed', newVal)
  }
)
onMounted(() => {
  console.log(props, c)
})
</script>
